<template>
  <div style="width: 100%;">
    <div style="width: 80%;display: flex;
                background-color:white;height:50px;
                border-radius:5px;margin-left:10%;
                margin-top:40px;line-height:50px;
                padding-left:5px;padding-right:5px;
                margin-bottom:40px">
      <div style="width:50%;font-size: 30px;">归档</div>
      <div style="flex:1;text-align:right;">共<span style="font-size: 30px;color:red">{{ number }}</span>篇</div>
    </div>


    <div v-for="year of years" :key="year.year">
      <h1 style="width: 80%;margin-left:40%;padding-bottom:0">{{ year.year }}</h1>
      <div style="width: 80%;
                background-color:white;
                border-radius:5px;margin-left:10%;
                margin-top:10px;
                padding-left:20px;padding-right:5px;
                margin-bottom:40px">
       
        <div class="bl" v-for="blog of year.blogs" :key="blog.id" style="width: 100%;display:flex;height:40px;line-height:40px;padding-left:4px;border-bottom:1px #eee solid"> 
          <div style="width: 80%;">
            <i class="el-icon-eleme" style="margin-right: 10px;font-size:larger"></i>
            关于刻意联系
            <span style="border: 1px rgb(0, 128, 255) solid;border-radius:3px;padding:2px 2px 2px 2px;font-size:10px">
              
              {{ blog.date }}
            </span>
          </div>
          
          <div style="margin-left:15%;">
            <span style="border:1px rgba(255, 25, 0, 0.881) solid;
                        padding:0;color:rgba(255, 38, 0, 0.881);
                        font-weight:500;
                        border-radius:4px">
              {{ blog.blogtype }}
            </span>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name:'Cache',
  data(){
    return{
      number:23,
      years:[
        {year:2023,blogs:[
          {id:1,blog:'关于刻意联系',date:'9月13日',blogtype:'原创'},
          {id:1,blog:'关于刻意联系',date:'9月13日',blogtype:'转载'},
          {id:1,blog:'关于刻意联系',date:'9月13日',blogtype:'原创'},
        ]},
        {year:2023,blogs:[
          {id:1,blog:'关于刻意联系',date:'9月13日',blogtype:'原创'},
          {id:1,blog:'关于刻意联系',date:'9月13日',blogtype:'原创'},
          {id:1,blog:'关于刻意联系',date:'9月13日',blogtype:'原创'},
        ]},
        {year:2023,blogs:[
          {id:1,blog:'关于刻意联系',date:'9月13日',blogtype:'原创'},
          {id:1,blog:'关于刻意联系',date:'9月13日',blogtype:'原创'},
          {id:1,blog:'关于刻意联系',date:'9月13日',blogtype:'原创'},
        ]},
        {year:2023,blogs:[
          {id:1,blog:'关于刻意联系',date:'9月13日',blogtype:'原创'},
          {id:1,blog:'关于刻意联系',date:'9月13日',blogtype:'原创'},
          {id:1,blog:'关于刻意联系',date:'9月13日',blogtype:'原创'},
        ]}
      ]
    }
  }
}

</script>

<style scoped>
.bl:hover{
background-color: aliceblue;
}

</style>